<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>氨基酸数据库</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../css/custom-pwl.css">
    <link rel="stylesheet" href="../css/sweetalert.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../img/logo.ico">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>[endif]-->
</head>
<body>
<div class="page">
    <!-- 顶部导航-->
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">

                    <div class="navbar-header">
                        <!-- 顶部左侧logo -->
                        <a href="../index.html" class="navbar-brand d-none d-sm-inline-block">
                            <div class="brand-text d-none d-lg-inline-block"><strong>氨基酸数据库</strong></div>
                            <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>CATD</strong>
                            </div>
                        </a>
                        <!-- 顶部右侧下拉菜单图标-->
                        <a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- 下拉菜单 -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item dropdown">
                            <a href="#" class="dropdown-toggle dropdown-user-link" data-toggle="dropdown">
										<span class="dropdown-user-name">
											<i>你好，姓名</i>
										</span>
                            </a>
                            <div class="dropdown-menu pull-right dropdown-menu-bigbox">

                                <div class="dropdown-menu-bigbox-top">
                                    <div id="user_name" class="dropdown-menu-bigbox-top-user-name">
                                        <span>姓名</span>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-bottom">
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid" style="cursor: pointer" onclick="window.location.href='../web/changePwd.html';return false">
                                        <i class="fa fa-key dropdown-menu-bigbox-bottom-icon"
                                           style="font-size: 25px;line-height: 45px;color: #438eb9;"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span>密码修改</span>
                                        </p>
                                    </div>
                                </div>

<!--                                <div class="row dropdown-menu-bigbox-bottom">-->
<!--                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">-->
<!--                                        <i class="fa fa-comments dropdown-menu-bigbox-bottom-icon"></i>-->
<!--                                        <p class="dropdown-menu-bigbox-bottom-font">-->
<!--                                            <span>消息</span>-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">-->
<!--                                        <i class="fa fa-heart-o dropdown-menu-bigbox-bottom-icon"></i>-->
<!--                                        <p class="dropdown-menu-bigbox-bottom-font">-->
<!--                                            <span>帮助中心</span>-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </div>-->


                                <div class="row dropdown-menu-bigbox-exit">
                                    <div class="dropdown-menu-bigbox-exit-font">
                                        <a href="login.html" class="nav-link logout"><span>退出登录</span><i
                                                class="fa fa-sign-out"></i></a>
                                    </div>
                                </div>
                            </div>

                        </li>

                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class=" d-flex align-items-stretch padding-top">
        <!-- 侧边导航栏 -->
        <nav class="side-navbar" id="navbar">
            <ul class="list-unstyled">
                <li ><a href="../index.html"> <i class="icon-home"></i>首页 </a></li>
                <li class="active"><a href="addAminoAcid.html" > <i class="icon-grid"></i>氨基酸管理 </a>
                </li>

                <li><a href="#culAminoAcid" data-toggle="collapse" aria-expanded="false" aria-controls="culAminoAcid">
                    <i class="fa fa-bar-chart"></i>计算 </a>
                    <ul id="culAminoAcid" class="collapse list-unstyled">
                        <li><a href="culAminoAcid.html">氨基酸计算</a></li>
                        <li><a href="comparison.html">对比</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#culResult" data-toggle="collapse" aria-expanded="false" aria-controls="culResult">
                        <i class="fa fa-bar-chart"></i> 查看计算结果
                    </a>
                    <ul id="culResult" class="collapse list-unstyled">
                        <li><a href="culResult.html">计算结果</a></li>
                        <li><a href="uploadData.html">上传的数据</a></li>
                        <li ><a href="comparisonList.html">对比的数据</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- 网页主体 -->
        <div id="main-content" class="content-inner">
            <!-- 标题-->
            <!-- <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">课程管理</h2>
                </div>
            </header> -->
            <!-- 面包屑导航 -->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
                    <li class="breadcrumb-item active">添加氨基酸</li>
                </ul>
            </div>
            <section class="client">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3>添加</h3>
                                </div>
                                <div class="card-body">
                                    <!-- 搜索框 -->

                                    <div class="container-fluid">
                                        <div class="table-responsive">
                                                <div class="form-group">
                                                    <label for="aminoName">氨基酸名称</label>
                                                    <input type="text" class="form-control" id="aminoName" placeholder="输入氨基酸名称">
                                                </div>
                                                <div class="form-group">
                                                    <label for="aminoValue">氨基酸值</label>
                                                    <input type="text" class="form-control" id="aminoValue" placeholder="输入氨基酸值">
                                                </div>
                                                <button type="button" class="btn btn-primary ml-auto" id="btn-add-amino">添加氨基酸</button>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">氨基酸库</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>氨基酸</th>
                                                <th>键值</th>
                                                <th>操作</th>

                                            </tr>
                                            </thead>
                                            <tbody id="exam_point">
                                            <!-- 动态数据行将插入这里 -->
                                            </tbody>
                                        </table>
                                    </div>
                                    <nav>
                                        <nav>
                                            <div id="pagination"></div>
                                        </nav>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>



            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Copyright &copy; 2024. <a
                                    href="../index.html" target="_blank" title="CATD">ZWH</a></p>
                        </div>
                        <div class="col-sm-6 text-right">
                            <p></p>
                            <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../vendor/popper.js/umd/popper.min.js"> </script>
<script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"> </script>
<!-- <script src="https://cdn.bootcss.com/Chart.js/2.7.0/Chart.min.js"></script> -->
<script src="../vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="../js/jquery.nicescroll.min.js"></script>
<!--<script src="../js/charts-home.js"></script>-->
<!-- Main File-->
<script src="../js/front.js"></script>
<script src="../js/sweetalert-dev.js"></script>
<!-- Custom File-->
<script src="../js/exam-point.js"></script>
<script>
    $(document).ready(function(){
        var currentPage = 1;
        var pageSize = 20;

        function loadAminoData(page) {
            $.ajax({
                url: '/amino/all',
                type: 'GET',
                data: {
                    page: parseInt(page, 10), // 确保参数为整数
                    size: pageSize
                },
                success: function(response) {
                    $('#exam_point').empty();
                    $.each(response.data, function(index, amino) {
                        // 确保每个 amino 对象有 id 属性
                        if (amino.id === undefined) {
                            console.error('Amino 对象缺少 id 属性', amino);
                            return;
                        }

                        var row = '<tr data-id="' + amino.id + '">' +
                            '<th scope="row">' + (index + 1 + (page - 1) * pageSize) + '</th>' +
                            '<td>' + amino.name + '</td>' +
                            '<td>' + amino.value + '</td>' +
                            '<td><button class="btn btn-danger btn-delete">删除</button></td>' +
                            '</tr>';
                        $('#exam_point').append(row);
                    });

                    // 设置删除按钮的点击事件
                    $('.btn-delete').click(function() {
                        var row = $(this).closest('tr');
                        var id = row.data('id');
                        if (id) {
                            deleteAmino(id, row);
                        } else {
                            alert('无法获取氨基酸的ID');
                        }
                    });

                    // 设置分页
                    setupPagination(response.totalPages, page);
                },
                error: function(error) {
                    console.error('Error:', error);
                    alert('获取氨基酸数据失败！');
                }
            });
        }

        function deleteAmino(id, row) {
            $.ajax({
                url: '/amino/delete/' + id,
                type: 'DELETE',
                success: function(response) {
                    alert(response);
                    // 从页面上删除对应的行
                    row.remove();
                },
                error: function(error) {
                    console.error('Error:', error);
                    alert('删除氨基酸失败！');
                }
            });
        }

        function setupPagination(totalPages, currentPage) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            const ul = document.createElement('ul');
            ul.className = 'pagination justify-content-end';

            // Previous button
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            prevLi.innerHTML = `<a class="page-link" href="#">Previous</a>`;
            prevLi.addEventListener('click', () => {
                if (currentPage > 1) loadAminoData(currentPage - 1);
            });
            ul.appendChild(prevLi);

            // Page numbers
            const createPageItem = (page) => {
                const li = document.createElement('li');
                li.className = `page-item ${page === currentPage ? 'active' : ''}`;
                li.innerHTML = `<a class="page-link" href="#">${page}</a>`;
                li.addEventListener('click', () => loadAminoData(page));
                return li;
            };

            if (totalPages <= 10) {
                for (let i = 1; i <= totalPages; i++) {
                    ul.appendChild(createPageItem(i));
                }
            } else {
                ul.appendChild(createPageItem(1));
                ul.appendChild(createPageItem(2));

                if (currentPage > 5) {
                    const li = document.createElement('li');
                    li.className = 'page-item disabled';
                    li.innerHTML = `<a class="page-link" href="#">...</a>`;
                    ul.appendChild(li);
                }

                const start = Math.max(3, currentPage - 2);
                const end = Math.min(totalPages - 2, currentPage + 2);

                for (let i = start; i <= end; i++) {
                    ul.appendChild(createPageItem(i));
                }

                if (currentPage < totalPages - 4) {
                    const li = document.createElement('li');
                    li.className = 'page-item disabled';
                    li.innerHTML = `<a class="page-link" href="#">...</a>`;
                    ul.appendChild(li);
                }

                ul.appendChild(createPageItem(totalPages - 1));
                ul.appendChild(createPageItem(totalPages));
            }

            // Next button
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            nextLi.innerHTML = `<a class="page-link" href="#">Next</a>`;
            nextLi.addEventListener('click', () => {
                if (currentPage < totalPages) loadAminoData(currentPage + 1);
            });
            ul.appendChild(nextLi);

            pagination.appendChild(ul);
        }

        $('#btn-add-amino').click(function(){
            var aminoName = $('#aminoName').val();
            var aminoValue = $('#aminoValue').val();

            var aminoData = {
                name: aminoName,
                value: aminoValue
            };

            $.ajax({
                url: '/amino/add',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(aminoData),
                success: function(response) {
                    alert(response);
                    // 清空输入框
                    $('#aminoName').val('');
                    $('#aminoValue').val('');
                    loadAminoData(currentPage);
                },
                error: function(error) {
                    console.error('Error:', error);
                    alert('添加氨基酸失败！');
                }
            });
        });

        loadAminoData(currentPage);
    });



</script>
</body>
</html>
